<script>
import comMixin from "./comMixin.js";
export const multipleAllNumber = "-999999";
export default {
  mixins: [comMixin],
  props: {
    multiple: {
      type: Boolean,
      default: false,
    },
    onChange: {
      type: Function,
      default: () => null,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
    filterable: {
      type: Boolean,
      default: true,
    },
    selectExpand: {
      type: Boolean,
      default: true,
    },
    // 默认两列显示
    twoColumn: {
      type: Boolean,
      default: true,
    },
    prepend: {},
    append: {},
  },
  data() {
    return {
      mulVals: [],
      oldArr: [],
    };
  },
  computed: {
    dicDataAllSync() {
      if (
        this.multiple &&
        !this.dicDataSync.find((it) => it.value === multipleAllNumber)
      ) {
        this.dicDataSync.unshift({
          label: $AONE_LAN.all,
          value: multipleAllNumber,
        });
      }
      if (this.multiple) {
        this.dicDataSync.forEach((it) => {
          if (!Reflect.has(it, "ischecked")) {
            it.ischecked = false;
          }
        });
      }
      this.dicDataSync.forEach((it) => {
        it.value = `${it.value}`;
      });
      return this.dicDataSync;
    },
  },
  watch: {
    formData: {
      immediate: true,
      deep: true,
      handler() {
        if (this.multiple) {
          this.mulVals = this.formData[this.prop];
        }
      },
    },
  },
  methods: {
    onMultipleClear() {
      this.formData[this.prop] = [];
      this.mulVals = [];
      return this.onChange([]);
    },
    onMultipleChange(valArr) {
      if (
        !this.oldArr.includes(multipleAllNumber) &&
        valArr.includes(multipleAllNumber)
      ) {
        // 第一次点全选，则选择全部
        this.formData[this.prop] = this.dicDataSync.map((it) => it.value);
        this.oldArr = this.formData[this.prop];
      } else {
        if (
          this.oldArr.includes(multipleAllNumber) &&
          !valArr.includes(multipleAllNumber)
        ) {
          // 第二次点全选，就是取消，则都不选
          this.formData[this.prop] = [];
          this.oldArr = valArr;
        } else if (
          valArr.includes(multipleAllNumber) &&
          valArr.length < this.dicDataSync.length
        ) {
          // 全选之后，点了某个数字，也要点取消全选按钮
          this.formData[this.prop] = valArr.filter(
            (it) => it !== multipleAllNumber
          );
          this.oldArr = this.formData[this.prop];
        } else {
          this.formData[this.prop] = valArr;
          this.oldArr = valArr;
        }
      }
      this.mulVals = this.formData[this.prop];
      this.$nextTick(() => {
        // 下拉选中后，input框的展示完tag，或者 显示+4这种
        const elTags = this.$el.querySelectorAll(".el-select__tags .el-tag");
        const labels = this.dicDataSync
          .filter(
            (it) =>
              it.value != multipleAllNumber && this.mulVals.includes(it.value)
          )
          .map((it) => it.label);
        if (this.selectExpand) {
          if (elTags.length > 0) {
            elTags[0].querySelector(".el-select__tags-text").innerHTML = labels
              .toString()
              .substring(0, 20);
          }
          if (elTags.length > 1) {
            elTags[1].style.display = "none";
          }
        } else if (elTags.length > 1) {
          const tagText = elTags[1].querySelector(".el-select__tags-text");
          tagText.style.paddingLeft = "0px";
          tagText.innerText = `+${labels.length} ${$AONE_LAN.selectText}`;
        }
      });
      return this.onChange(this.formData[this.prop]);
    },
    renderMultipleSelect() {
      const renderNode = (item) => {
        return (
          <el-option key={item.value} label={item.label} value={item.value}>
            <el-checkbox-group
              v-model={this.formData[this.prop]}
              onChange={this.onMultipleChange}
            >
              <el-checkbox label={item.value}>{item.label}</el-checkbox>
            </el-checkbox-group>
          </el-option>
        );
      };
      const vnodeArr = [];
      for (let index = 0; index < this.dicDataAllSync.length; ) {
        const item = this.dicDataAllSync[index];
        if (this.twoColumn) {
          const itemNext =
            this.dicDataAllSync.length > index + 1
              ? this.dicDataAllSync[index + 1]
              : null;
          index += 2;
          vnodeArr.push(
            <div class="multiple-select-group">
              {renderNode(item)}
              {itemNext ? renderNode(itemNext) : null}
            </div>
          );
        } else {
          index += 1;
          vnodeArr.push(
            <div class="multiple-select-group multiple-select-onecolumn">
              {renderNode(item)}
            </div>
          );
        }
      }
      return (
        <el-select
          class={["aoneui-select", "aoneui-select-multiple"]}
          multiple={true}
          collapse-tags={true}
          v-model={this.mulVals}
          clearable={this.clearable}
          filterable={false}
          placeholder={this.placeholderSync}
          onClear={this.onMultipleClear}
        >
          {vnodeArr}
        </el-select>
      );
    },
    renderSingleChange(valArr) {
      return this.onChange(valArr);
    },
    renderSingleSelect() {
      return (
        <el-select
          class={"aoneui-select"}
          v-model={this.formData[this.prop]}
          clearable={this.clearable}
          filterable={this.filterable}
          placeholder={this.placeholderSync}
          onChange={this.renderSingleChange}
        >
          {this.dicDataAllSync.map((item) => {
            return (
              <el-option
                key={item.value}
                label={item.label}
                value={item.value}
              ></el-option>
            );
          })}
        </el-select>
      );
    },
    onOldChange(arr) {
      this.formData[this.prop] = arr.filter((it) => it != multipleAllNumber);
    },
    renderOldMultipleSelect() {
      return (
        <w-select-row
          options={this.dicDataAllSync}
          returnFiled="value"
          filed="label"
          ischecked="ischecked"
          placeholder={this.placeholderSync}
          onChange={this.onOldChange}
          width="8"
          hoverWidth="16"
          height="1.25"
        />
      );
    },
  },
  render() {
    return (
      <div class="aoneui-select-wrap">
        {this.prepend}
        {this.multiple
          ? this.renderMultipleSelect()
          : this.renderSingleSelect()}
        {this.append}
      </div>
    );
  },
};
</script>

<style lang="scss" scoped>
.aoneui-select-wrap{
  display: flex;
  align-items: center;
}
.aoneui-select {
  width: 100%;
  /deep/ {
    .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
    .el-input__icon {
      line-height: 32px;
    }
    .el-select__tags-text {
      max-width: 60px;
      text-overflow: initial;
      padding-left: 4px;
    }
    .el-select__tags > span + .el-select__input {
      display: none;
    }
    .el-select__tags {
      overflow: hidden;
      .el-tag {
        display: block;
      }
      .el-tag::after {
        display: none !important;
      }
      > span {
        display: flex;
      }
      .el-tag__close {
        display: none;
      }
    }
  }
}
.multiple-select-group {
  display: flex;
  border-bottom: 1px solid #ddd;
  /deep/ {
    .el-select-dropdown__item {
      width: 50%;
      margin-top: 0;
      .el-checkbox {
        display: flex;
        align-items: center;
      }
      .el-checkbox__input {
        margin-left: 10px;
      }
      .el-checkbox__label {
        margin-right: 10px;
        max-width: 140px;
        min-width: 80px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .el-select-dropdown__item:nth-child(even) {
      border-left: 1px solid #e4e5ea;
    }
  }
}
.multiple-select-group:first-child {
  border-top: 1px solid #e4e5ea;
}
.multiple-select-group:nth-child(even) {
  background-color: #f6f7fb;
}
.multiple-select-onecolumn {
  /deep/ {
    .el-select-dropdown__item {
      width: 100%;
    }
  }
}
.multiple-select-onecolumn:nth-child(even) {
  background-color: initial;
}
</style>
<style lang="scss">
div.el-select-dropdown.is-multiple {
  .el-select-dropdown__item {
    padding: 0;
    .el-checkbox-group,
    .el-checkbox {
      height: 100%;
      width: 100%;
    }
  }
}
</style>
